<!--
 * @Description: 权限申请+审核
 * @Author: fxg
 * @Date: 2020-06-29 11:18:28
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-08-04 18:09:09
-->
<template>
	<div class="flows-content">
		<el-container>
			<el-main style="margin-bottom: 20px; padding: 0;">
				<el-container direction="vertical">
					<FlowHeader :isReadOnly="readOnly" @saveSubmit="handleSubmit(1)" @sendSubmit="handleSubmit(2)" @handleBackEnd="handleSubmit(3)" @handleCC="handleSubmit(4)" @handleAssign="handleSubmit(5)" @handleBackUp="handleSubmit(6)" @handleAssist="handleSubmit(7)" @handleNode="handleSubmit(8)" @handleNodeImage="handleSubmit(9)" @handleCollection="handleSubmit(10)" />
					<el-main class="info">
						<div>
              <el-input v-model="title" class="flow-title" :disabled="$route.query.type*1!==1" placeholder="请输入流程标题"></el-input>
            </div>
            <div class="info-top">
              <div class="left">
                <span>单据号码：{{billCode}}</span>
                <span class="text">制单日期：{{billDate}}</span>
              </div>
              <div class="right">
                <span>发起人：{{applyPerson}}</span>
                <span class="text">状态：{{taskTypeText[taskStatus*1]}}</span>
              </div>
            </div>
						<!-- 描述信息 -->
						<div class="input">
							<div class="text">描述信息：</div>
							<el-input v-model="describtion" :disabled="readOnly" placeholder="请输入..." class="textarea" type="textarea" resize="none" rows="4"></el-input>
						</div>
						<!-- 开通的组织或人员 -->
						<div class="person">
							<div class="text">开通的组织或人员：</div>
							<div class="item">
								<div v-for="(item, index) in personList" :key="item.id">
									<span>{{item.name}}</span>
									<i v-if="!readOnly" class="icon iconfont iconzu2197" @click="delUserList(index)"></i>
								</div>
								<div v-if="!readOnly">
									<el-link icon="el-icon-circle-plus" :underline="false" @click="addUserlist()">添加</el-link>
								</div>
							</div>
						</div>
						<div class="bottom">
							<div v-show="!$route.query.type" class="bottom_left">
								<div class="title">选择</div>
								<div class="right">
									<!-- 导航 -->
									<div class="nav">
										<template v-for="(item, index) in rightList">
											<div :key="index" :class="item.value == rightIndex ? 'right-active' : ''" @click="changetight(item.value)">{{ item.text }}</div>
										</template>
									</div>
									<!-- 功能 -->
									<div v-show="rightIndex !== 5" v-loading="loading1" class="right-info" element-loading-text="功能权限同步中...">
										<el-tree ref="functiontree" node-key="id" show-checkbox :data="functiontreeData" class="tree-line" :indent="0"  :props="props" @check="getButton">
											<span slot-scope="{ node }" class="custom-tree-node">
												<span>{{ node.label }}</span>
											</span>
										</el-tree>
									</div>
									<!-- 数据 -->
									<div v-show="rightIndex == 5" v-loading="rightloading" class="right-info" element-loading-text="数据权限同步中...">
										<div class="right-info-left scroll" style="width:180px">
											<el-tree ref="newtree" node-key="id" default-expand-all :data="newtree" :props="props" class="tree-line"  :indent="0"  :expand-on-click-node="false">
												<span slot-scope="{ node ,data}" class="custom-tree-node">
													<span v-if="data.hierarchytyp=='system'">
														<span>{{ node.label }}</span>
													</span>
													<el-radio-group v-else v-model="radio" @change="gettable(data)">
														<el-radio :label="data">
															<span>{{ data.name }}</span>
														</el-radio>
													</el-radio-group>
												</span>
											</el-tree>
										</div>
										<div class="right-info-right">
											<div style=" border:1px solid #e1e5ed;width:100%">
												<el-input v-model="searchValue" :debounce='1000' style="padding:10px;" placeholder="可输入字符对数据进行全局搜索" />
												<el-table ref="reftableData" :data="tableData" style="width:100%" @selection-change	="changeval" >
													<el-table-column v-if="tableData.length!==0&&!readOnly" type="selection" width="55">
													</el-table-column>
													<template v-for="(item,index ) in tableTitle">
														<el-table-column :key="index" :prop="item.columnName" align="center" :label="item.columnComment" min-width="160"></el-table-column>
													</template>
												</el-table>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- 已选中的数据 -->
							<div class="bottom_center"></div>
							<div class="bottom_left">
								<div class="title">已选择权限 </div>
								<div class="right">
									<!-- 导航 -->
									<div class="nav">
										<template v-for="(item, index) in rightList">
											<div :key="index" :class="item.value == rightIndex ? 'right-active' : ''" @click="changetight(item.value)">{{ item.text }}</div>
										</template>
									</div>
									<!-- 功能 -->
									<div v-show="rightIndex !== 5" v-loading="loading1" class="right-info" element-loading-text="功能权限同步中...">
										<div>
											<el-tree ref="newfunctiontree" node-key="id" default-expand-all :data="newfunctiontreeData" class="tree-line"  :indent="0"  :props="props">
												<span slot-scope="{ node }" class="custom-tree-node">
													<span>{{ node.label }}</span>
												</span>
											</el-tree>
										</div>
									</div>
									<!-- 数据 -->
									<div v-show="rightIndex == 5" v-loading="rightloading" class="right-info" element-loading-text="数据权限同步中...">
										<div class="right-info-left scroll" style="width:180px">
											<el-radio-group v-model="radio">
												<template v-for="(item,index) in checktableData">
													<div :key="index" style="padding:10px">
														<el-radio :label="item.system" @change="gettable(item.system)">
															<span>{{ item.systemName }}</span>
														</el-radio>
													</div>
												</template>
											</el-radio-group>
										</div>
										<div class="right-info-right">
											<div style="border:1px solid #e1e5ed;width:100%">
												<el-table v-if="checktableData.find(res=>(res.system==radio))" :data="checktableData.find(res=>(res.system==radio)).tableData" style="width:100%" height="100%">
													<template v-for="(item,index ) in checktableData.find(res=>(res.system==radio)).tableTitle">
														<el-table-column :key="index" :prop="item.columnName" align="center" :label="item.columnComment" min-width="160"></el-table-column>
													</template>
												</el-table>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="flows-details">
              <FlowContent ref="flowcontent" :title='title' :showSendVisible="showSendVisible" @handleCancel="handleCancel" @sendCode="sendCode" @handleFinish="handleFinish" @handleBusiness="handleBusiness" />
            </div>
					</el-main>
				</el-container>
			</el-main>
		</el-container>
		<personModel :visible='visible' :strictly="true" :choisedDatas="personList" @closeModel='closeModel' @getPerson='getPerson' />
	</div>
</template>
<script src="./PermissionsApply.js"></script>
<style lang="scss">
.PermissionsApply {
  .is-current > .el-tree-node__content {
    color: var(--bg_color);
  }
  .el-table--scrollable-y .el-table__body-wrapper {
    height: calc(100% - 40px) !important;
    overflow: auto !important;
  }
}
</style>
<style lang="scss" src="./PermissionsApply.scss" scoped></style>
